<template>
    <el-pagination background layout="prev, pager, next, jumper, sizes, total" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>

<script>
export default {
    name: 'Pagination',
    props: {
        currentPage: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        },
        total: {
            type: Number,
            default: 0
        },
        pageSizes: {
            type: Array,
            default: () => [10, 20, 30, 50]
        }
    },
    methods: {
        handleSizeChange(newSize) {
            this.$emit('size-change', newSize)
        },
        handleCurrentChange(newPage) {
            this.$emit('current-change', newPage)
        }
    }
}
</script>